<template>
    <el-dialog title="" :visible.sync="active" width="600px" class="commentRuleForm" :show-close="false" @close="commentFormClose('ruleForm')">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="Score" prop="score">
                <el-rate v-model="ruleForm.score"></el-rate>
            </el-form-item>
            <el-form-item label="Nickname" prop="nickname">
                <el-input v-model="ruleForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="Summary" prop="summary">
                <el-input v-model="ruleForm.summary"></el-input>
            </el-form-item>
            <el-form-item label="Color" prop="color">
                <el-radio-group v-model="ruleForm.color">
                    <el-radio label="blue"></el-radio>
                    <el-radio label="red"></el-radio>
                    <el-radio label="yellow"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="File">
                <input type="file" @change="getFile($event)" ref="file">
            </el-form-item>
            <el-form-item label="Review" prop="review">
                <el-input type="textarea" v-model="ruleForm.review"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">{{$t('Submit Review')}}</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
export default {
    data() {
        /*
         *@functionName: 
         *@params: 
         *@description: 自定义正则
         *@author: Mister Wang
         *@date: 2020-11-09 13:48:32
         *@version: V1.0.0
        */
        const ratePassCheck = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('Please select one of each of the ratings above.'))
            }
            if (!/^[1-9]\d*$/.test(value)) {
                callback(new Error('Please enter the correct value'))
            }
            const result = parseInt(value)
            if (result >= 0) {
                callback()
            } else {
                callback(new Error('Please enter an integer'))
            }
        }        
        return {
            ruleForm: {
                score: 0,
                nickname: '',
                summary: '',
                review: '',
                fileImg: '',
                color: ''
            },
            rules: {
                score: [
                    { validator: ratePassCheck, trigger: 'change',required: true }
                ],
                nickname: [
                    { required: true, message: 'This is a required field.', trigger: 'blur' }
                ],
                summary: [
                    { required: true, message: 'This is a required field.', trigger: 'blur' }
                ],
                review: [
                    { required: true, message: 'This is a required field.', trigger: 'blur' }
                ],
                color: [
                    { required: true, message: 'please choose color.', trigger: 'change' }
                ]
            },
            active: false,
        }
    },
    props: {
        commentActive: {
            default: false,
            type: Boolean,
        }
    },
    watch: {
        commentActive(newval, oldval) {
            this.active = newval;
        }
    },
    methods: {
        /*
         *@functionName: getFile
         *@params: e>>输入的文件单元
         *@description:获取图片信息，并上传
         *@author: Mister Wang
         *@date: 2020-11-09 14:29:40
         *@version: V1.0.0
        */
        getFile(e) {
            console.log('e :>> ', e.target.files);
        },
        /*
         *@functionName: submitForm
         *@params: formName>>评论内容
         *@description: 提交评论内容
         *@author: Mister Wang
         *@date: 2020-11-09 14:29:05
         *@version: V1.0.0
        */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                console.log('object :>> ', this.ruleForm);
                this.$message({
                    message: 'commit success!',
                    type: 'success',
                    center: true
                });
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        commentFormClose(formName) {
            this.$refs[formName].resetFields();
            this.$refs.file.value = '';
            this.$emit('closeActive');
        },
    }
}
</script>

<style>

</style>